<template>
  <div class="container">
    <div>
      <div class="menu-navbar">
        <el-button size="small" type="" @click="cancelSubmit">取消</el-button>
        <el-button size="small" type="primary" @click="createSubmit('appendlist')">确 定</el-button>
      </div>
      <div>
        <el-form :model="appendlist" label-position="top" size="small" ref="appendlist" :rules="appendrules" label-width="110px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="接口描述" prop="interfaceDescription">
                <el-input  v-model="appendlist.interfaceDescription" placeholder="接口描述" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="接口用途" prop="interfaceUse">
                <el-select v-model="appendlist.interfaceUse" clearable placeholder="接口用途" :disabled="false">
                  <el-option
                    v-for="item in interfaceUseOptions"
                      :key="item.type"
                      :label="item.value"
                      :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="接口状态" prop="status">
                <el-select v-model="appendlist.status" clearable placeholder="接口状态" :disabled="false">
                  <el-option
                    v-for="item in typeOptions"
                      :key="item.type"
                      :label="item.value"
                      :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属业务系统" prop="belongSystem">
                <el-select v-model="appendlist.belongSystem" clearable @focus="editSubSystemsOptions">
                  <el-option v-for="item in subSystemsOptions" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="接口类型" prop="interfaceType" >
                <el-select v-model="appendlist.interfaceType" clearable placeholder="接口类型" :disabled="false" @change="currentSel">
                  <el-option
                    v-for="item in interfaceTypeOptions"
                      :key="item.type"
                      :label="item.value"
                      :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="restDisplay">
              <el-form-item label="接口地址（restful）" prop="restUrl">
                  <el-input v-model="appendlist.wsdl" placeholder="接口地址（restful）"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="restDisplay">
            <el-col :span="12">
              <el-form-item label="方法类型（restful）" prop="methodType">
                <el-select v-model="appendlist.methodType" clearable placeholder="方法类型（restful）" :disabled="false">
                  <el-option
                    v-for="item in methodTypeOptions"
                      :key="item.type"
                      :label="item.value"
                      :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请求头（restful）" prop="restHeader">
                <el-input v-model="appendlist.restHeader"  placeholder="请求头（restful）"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="restDisplay">
            <el-col :span="12">
              <el-form-item label="请求参数（restful）" prop="restParams">
                <el-input v-model="appendlist.callMethod" placeholder="请求参数（restful）"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请求体（restful）" prop="restBody">
                <el-input v-model="appendlist.restBody"  placeholder="请求体（restful）"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="wsDisplay">
            <el-col :span="12">
              <el-form-item label="wsdl地址（webservice）" prop="wsdlUrl">
                <el-input v-model="appendlist.wsdl" placeholder="wsdl地址（webservice）"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="命名空间（webservice）" prop="namespace">
                <el-input v-model="appendlist.namespace"  placeholder="命名空间（webservice）"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="wsDisplay">
            <el-col :span="12">
              <el-form-item label="调用方法（webservice）" prop="callMethod">
                <el-input v-model="appendlist.callMethod" placeholder="调用方法（webservice）"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请求参数（webservice）" prop="wsParams">
                <el-input v-model="appendlist.wsParams" placeholder="请求参数（webservice）"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  interfaceInfoInsert, getUUID
} from '@/api/bussSystemManage/interfaceInfo'
import { selectSysSubsys } from '@/api/systemManage/roleManagementEdit'
export default {
  data() {
    return {
      wsDisplay: false,
      restDisplay: false,
      loading: false,
      subSystemsOptions: [],
      appendlist: {
        interfaceInfoId: '', // 接口信息表主键ID
        appId: '', // 应用ID
        appName: '', // 应用名称
        appPassword: '', // 应用密码
        clientPort: '', // 客户端口
        wsdl: '', // 接口地址
        namespace: '', // 命名空间（webservice）
        operationName: '', // 方法名称
        dbpath: '', // 接口数据库
        timeOut: '', // 超时时间(单位是毫秒)
        requestTime: '',
        responseTime: '', // 响应时间(单位是毫秒)
        userId: '', // 创建用户ID
        createTime: new Date(), // 创建时间
        isDisable: '', // 是否禁用（0_不禁用，1_禁用）
        interfacedescription: '', // 接口描述
        interfaceuse: '', // 接口用途
        status: '', // 接口状态(0正常1禁用2删除)
        belongsystem: '', // 所属业务系统
        interfacetype: '', // 接口类型
        methodtype: '', // 方法类型（restful）
        restheader: '', // 请求头（restful）
        restbody: '', // 请求体（restful）
        callmethod: '', // 调用方法（webservice）
        wsparams: '' // 请求参数（webservice）
      },
      appendrules: {
        interfaceDescription: [
          { message: '接口描述不能为空', required: true, trigger: 'blur' },
          { min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
        ],
        interfaceUse: [
          { message: '接口用途不能为空', required: true, trigger: 'blur' }
        ],
        status: [
          { message: '接口状态不能为空', required: true, trigger: 'blur' }
        ],
        belongSystem: [
          { message: '所属业务系统不能为空', required: true, trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        interfaceType: [
          { message: '接口类型不能为空', required: true, trigger: 'blur' }
        ],
        wsdl: [
          { message: '接口地址（restful）不能为空', required: true, trigger: 'blur' },
          { min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
        ],
        methodType: [
          { message: '方法类型（restful）不能为空', required: true, trigger: 'blur' }
        ],
        restHeader: [
          { min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
        ],
        restBody: [
          { min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
        ],
        namespace: [
          { message: '命名空间（webservice）不能为空', required: true, trigger: 'blur' },
          { min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
        ],
        callMethod: [
          { message: '调用方法（webservice）不能为空', required: true, trigger: 'blur' },
          { min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
        ],
        wsParams: [
          { min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
        ]
      },
      typeOptions: [
        {
          type: '0',
          value: '有效'
        },
        {
          type: '1',
          value: '禁用'
        },
        {
          type: '2',
          value: '删除'
        }
      ],
      interfaceUseOptions: [
        {
          type: '0',
          value: '待审批'
        },
        {
          type: '1',
          value: '已审批'
        },
        {
          type: '2',
          value: '申请中'
        },
        {
          type: '3',
          value: '审批通过'
        }
      ],
      interfaceTypeOptions: [
        {
          type: '0',
          value: 'restful'
        },
        {
          type: '1',
          value: 'webservice'
        }
      ],
      methodTypeOptions: [
        {
          type: '0',
          value: 'post'
        },
        {
          type: '1',
          value: 'get'
        },
        {
          type: '2',
          value: 'delete'
        },
        {
          type: '3',
          value: 'put'
        }
      ]
    }
  },
  // 画面刚进入method
  created() {
    getUUID().then(res => {
      this.appendlist.interfaceInfoId = res.data.data
    })
  },
  methods: {
    // 检索子系统
    editSubSystemsOptions() {
      const query = {
        sort: [{
          direction: 'ASC',
          property: 'id'
        }]
      }
      selectSysSubsys(query).then(response => {
        const records = response.data.data.records
        if (response.data.data.count > 0) {
          this.subSystemsOptions = []
          for (const item of records) {
            const input = {}
            input.id = item.id
            input.name = item.name
            this.subSystemsOptions.push(input)
          }
        }
      })
    },
    createSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          interfaceInfoInsert(this.appendlist).then(res => {
            this.cancelSubmit()
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
          }).catch((err) => {
            console.log(err)
            this.$message({
              type: 'danger',
              message: '添加失败!'
            })
          })
        } else {
          this.$message({
            type: 'danger',
            message: '添加失败!'
          })
          console.log('error submit!!')
          return false
        }
      })
    },
    currentSel(selVal) {
      if (selVal === '0') {
        this.wsDisplay = false
        this.restDisplay = true
      } else if (selVal === '1') {
        this.wsDisplay = true
        this.restDisplay = false
      } else {
        this.wsDisplay = false
        this.restDisplay = false
      }
    },
    cancelSubmit() {
      this.$emit('changeCloseAddDialog')
    }
  }
}
</script>

<style scoped>
  .menu-navbar{
    padding:0 0 20px;
    text-align: right;
  }
  .container{
    padding: 20px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
